<template>
	<div class="artist">
		<div class="info">
			<img :src="getUrl(singer.singerPic)" alt="" />
			<div class="detail">
				<h1>
					<el-tag effect="plain">歌手</el-tag>
					<span class="name">{{ singer.name }}</span>
				</h1>

				<div class="subscription">
					<el-button type="danger" plain><i class="iconfont icon-shoucang"></i>关注</el-button>
				</div>
                <div class="count">
					<span class="songsCount">出生地：{{ singer.location }}</span>
				</div>
                <div class="count">
					<span class="collectionsCount">生日：{{ formatDate(singer.birth) }}</span>
				</div>
			</div>
		</div>
		<el-tabs v-model="selectedTag" v-loading="isLoading">
            <el-tab-pane label="歌手描述" class="descrip" name="descrip">
				{{ singer.introduction }}
			</el-tab-pane>
			<el-tab-pane label="歌手歌曲" name="hotSongs">
				<el-button size="default" type="success" @click="playAll">
					<IconPark :icon="PlayOne" class="mr-1" size="16" />
					播放全部
				</el-button>
				<MusicList :musicArr="songList" :showArName="true" />
			</el-tab-pane>
			<el-tab-pane label="MV" name="mvist">
				<MvCard :list="mvList"></MvCard>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { getSingerById, getSongBySingerId,getMvs } from '@/api';
import { ElMessage } from 'element-plus';
import { PlayOne } from '@icon-park/vue-next';
import IconPark from '@/components/common/IconPark.vue';
import MusicList from '@/components/common/musicList.vue';
import { useRoute } from 'vue-router';
import { getUrl, formatDate } from '@/utils/format';
import { useSongStore } from '@/store/song';
import MvCard from "@/components/common/mvCard.vue";

const { play, addPlayList } = useSongStore();
const route = useRoute();

let isLoading = ref(true);
const singer = ref({});
const songList = ref([]);
const mvList = ref([]);

let selectedTag = ref('hotSongs');

const id = Number(route.params.id);

// 播放全部
const playAll = () => {
	addPlayList(true, ...songList.value);
	play(songList.value[0].id);
};

const getSongs = async () => {
	isLoading.value = true;
    const songsAll = await getSongBySingerId(id);
	songList.value = songsAll;
	isLoading.value = false;
};


const getData = async (artId: number) => {
	if (artId == 0) {
		return ElMessage.error('无相关艺人');
	}
    console.log("id是什么",artId);
	getSongs(artId);
	// 获取歌手详情
	const singerDetail = await getSingerById(artId);
	singer.value = singerDetail;
    console.log("获取了歌手数据",singer.value);
	// // 获取歌手专辑
	// const { hotAlbums } = await getArtistAlbum(artId);
	// albumList.value = hotAlbums;

	// 获取歌手MV
	const res = await getMvs(artId);
	mvList.value = res;
};

watch(
	() => route.query.id,
	() => {
		if (route.name === 'artistDetail') {
			getData(Number(route.query.id));
		}
	}
);

onMounted(() => {
	setTimeout(() => {
		getData(id);
	}, 0);
});
</script>

<style lang="scss" scoped>
.artist {
	min-height: 200px;
	.info {
		display: flex;
		font-size: 12px;
		padding-bottom: 20px;
		& > img {
			width: 176px;
			height: 176px;
			border-radius: 15px;
			margin-right: 20px;
		}
		.detail {
			h1 {
				font-size: 24px;
				color: #334155;
				display: flex;
				align-items: center;
				.name {
					margin-left: 10px;
				}
			}
			.count {
				margin-top: 15px;
				span {
					margin-right: 5px;
					font-size: 14px;
					color: #666;
				}
			}
		}
	}
	.descrip {
		text-indent: 2em;
		font-size: 14px;
	}
}
</style>